<script setup name="TaskBaseWorkDetail">
import { useRouter } from 'vue-router';
import { Plus } from '@element-plus/icons-vue';

const router = useRouter();
const routerQuery = router.currentRoute.value.query;
</script>

<template>
  <div class="TaskBaseWorkDetail">
    <header class="topHeader">
      <span>{{ routerQuery.name }}</span>
    </header>
    
    <nav class="breadcrumb">
      <span @click="router.push('/superAdministrator')" class="breadcrumb-link">任务发布</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-current">任务详情</span>
    </nav>
    
    <main class="taskPreviewBaseWork">
      <div class="layout">
        <div class="layoutHeader">
          <h1 class="title">{{ routerQuery.name }}</h1>
          <p class="time">时间：{{ routerQuery.startTime }}-{{ routerQuery.endTime }}</p>
        </div>
        
        <div class="layoutContent">
          <section class="content-card">
            <h2 class="section-header">基本要求</h2>
            <div class="content-description">
              按时参加学业导师相关工作，按照学业导师工作职责和相关要求完成工作，设定学期工作计划，每月至少与学生线下见面一次，定期记录并总结学生日常表现情况和教育管理资料数据，按照要求递交相关材料。协助学业做好就业指导工作，指导学生形成正确的就业观念。
            </div>
            <div class="upload-section">
              <h3 class="upload-title">支撑材料</h3>
              <div class="upload-area">
                <el-icon><Plus /></el-icon>
                <span>点击或者拖拽文件到此处上传</span>
              </div>
            </div>
          </section>
          
          <section class="content-card">
            <h2 class="section-header">学生思想引领</h2>
            <div class="content-description">
              以严谨求实的治学态度、追求卓越的学术精神和高尚的道德情操言传身教、感染学生，帮助学生坚定理想信念、厚植国家情怀，养成良好的道德品质和行为习惯。
            </div>
            <div class="upload-section">
              <h3 class="upload-title">支撑材料</h3>
              <div class="upload-area">
                <el-icon><Plus /></el-icon>
                <span>点击或者拖拽文件到此处上传</span>
              </div>
            </div>
          </section>
          
          <section class="content-card">
            <h2 class="section-header">学生职业规划</h2>
            <div class="content-description">
              结合本行业、本领域人才需求、专业人才培养方案以及学生个人意愿，为学生开展职业生涯规划指导，引领学生树立正确就业观，积极为学生拓宽就业创业视野、渠道和资源，鼓励学生扎根天津、服务京津冀协同发展。
            </div>
            <div class="upload-section">
              <h3 class="upload-title">支撑材料</h3>
              <div class="upload-area">
                <el-icon><Plus /></el-icon>
                <span>点击或者拖拽文件到此处上传</span>
              </div>
            </div>
          </section>
          
          <section class="content-card">
            <h2 class="section-header">学生科研成果</h2>
            <div class="content-description">
              引导学生了解学科专业前沿和发展动态，积极组织学生参加学术沙龙、科研课题研讨与各类创新实践等活动，指导学生掌握基本学术技能，创造条件让学生进入课题组、实验室，与研究生共同开展科研活动，积极发表学术论文、专利、软件著作权等。指导学生申报、参与各级各类大学生创新创业训练计划项目、创新创业赛事，全面提升创新创业能力及成果转化能力。
            </div>
            <div class="upload-section">
              <h3 class="upload-title">支撑材料</h3>
              <div class="upload-area">
                <el-icon><Plus /></el-icon>
                <span>点击或者拖拽文件到此处上传</span>
              </div>
            </div>
          </section>
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped lang="scss">
// 颜色变量
$primary-color: #4c5fbc;
$text-primary: #333;
$text-secondary: #686767;
$text-muted: #7f7f7f;
$border-color: #e0e0e0;
$bg-light: #f2f3f5;
$bg-white: #ffffff;
$shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);

.TaskBaseWorkDetail {
  width: 100%;
  height: 100%;
  font-weight: 500;
  color: $text-primary;
  .topHeader {
    width: 100%;
    height: 60px;
    padding-left: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid $border-color;
    background-color: $bg-white;
    font-size: 20px;
    box-shadow: $shadow-light;
  }

  .breadcrumb {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 40px;
    font-size: 16px;
    color: $text-muted;
    background-color: $bg-white;

    .breadcrumb-link {
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        color: $primary-color;
        font-weight: 600;
      }
    }

    .breadcrumb-separator {
      margin: 0 8px;
    }

    .breadcrumb-current {
      color: $text-primary;
      font-weight: 500;
    }
  }

  .taskPreviewBaseWork {
    width: 100%;
    height: calc(100% - 110px);
    padding: 0 80px;
    background-color: #f8f9fa;

    .layout {
      width: 100%;
      height: 100%;
      padding: 20px 0;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-track {
        background: #f1f1f1;
      }

      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
      }

      &::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1;
      }

      .layoutHeader {
        width: 100%;
        padding: 40px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

        .title {
          font-size: 28px;
          font-weight: 600;
          color: $text-primary;
          margin-bottom: 15px;
        }

        .time {
          font-size: 16px;
          font-family: monospace;
          color: $text-secondary;
          margin: 0;
        }
      }
      .layoutContent {
        width: 100%;
        .content-card {
          width: 100%;
          margin-bottom: 30px;
          padding: 30px;
          background-color: $bg-white;
          border-radius: 8px;
          box-shadow: $shadow-light;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          &:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
          }
          .section-header {
            font-size: 20px;
            font-weight: 600;
            color: $primary-color;
            margin: 0 0 20px 0;
            padding-bottom: 10px;
            border-bottom: 2px solid $primary-color;
            display: inline-block;
          }
          .content-description {
            line-height: 1.8;
            color: $text-primary;
            margin-bottom: 30px;
            font-size: 15px;
          }
          .upload-section {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            .upload-title {
              font-size: 16px;
              font-weight: 500;
              color: $text-secondary;
              min-width: 80px;
              margin: 0;
              padding-top: 5px;
            }

            .upload-area {
              flex: 1;
              height: 150px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 15px;
              padding: 20px;
              border: 2px dashed $border-color;
              border-radius: 6px;
              background-color: $bg-light;
              color: $text-muted;
              cursor: pointer;
              transition: all 0.3s ease;
              &:hover {
                border-color: $primary-color;
                background-color: rgba(76, 95, 188, 0.05);
                color: $primary-color;
              }
              el-icon {
                font-size: 28px;
              }
            }
          }
        }
      }
    }
  }
}
</style>